<template>
  <div class="">
    <el-button type="text" @click="dialogTableVisible = true">详细</el-button>
    <el-dialog
      title="订单详细"
      :visible.sync="dialogTableVisible"
      width="89%"
      custom-class="my-dialog"
      top="0"
      append-to-body='false'
    >
      <div class="divider"></div>
      <div class="orderDetailsBox">
        <div class="orderDetails" style="height: 75vh; overflow: auto">
          <div class="item">
            <div class="item-title"><h3>客户</h3></div>
            <div class="item-value-box">
              <div class="item-value">
                <div>
                  <span class="value-label">客户:</span
                  ><span class="value">美少女</span>
                </div>
                <div>
                  <span class="value-label">电话:</span
                  ><span class="value">127648699371</span>
                </div>
                <div>
                  <span class="value-label">客户ID:</span
                  ><span class="value">美少女哟哟</span>
                </div>
                <div>
                  <span class="value-label">地址:</span
                  ><span class="value"
                    >广东省江门市蓬江区棠下镇锦富汇景湾10栋1103
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-title"><h3>店铺</h3></div>
            <div class="item-value-box">
              <div class="item-value">
                <div>
                  <span class="value-label">店铺:</span
                  ><span class="value">松下岛鹰专卖店（天猫）</span>
                </div>
                <div>
                  <span class="value-label">账期:</span
                  ><span class="value">半月结算</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-title"><h3>商品</h3></div>
            <div class="item-value-box">
              <div class="item-value">
                <div>
                  <span class="value-label">订单:</span
                  ><span class="value">D493874651734</span>
                </div>
                <div>
                  <span class="value-label">销售单:</span
                  ><span class="value">127648699371</span>
                </div>
                <div>
                  <span class="value-label">天猫主订单:</span
                  ><span class="value"></span>
                </div>
                <div>
                  <span class="value-label">节点:</span
                  ><span class="value">新订单 </span>
                </div>
                <div>
                  <span class="value-label">付款状态:</span
                  ><span class="value">未付款 </span>
                </div>
                <div>
                  <span class="value-label">生成:</span
                  ><span class="value">2023-04-23 17：01 </span>
                </div>
                <div>
                  <span class="value-label">留言:</span
                  ><span class="value"> </span>
                </div>
              </div>
            </div>
            <myTableVue :ischeck="false" :columntag="columntag"></myTableVue>
          </div>
          <div class="item">
            <div class="item-title"><h3>工费</h3></div>
            <div class="item-value-box">
              <div class="item-value">
                <div>
                  <span class="value-label">工费:</span
                  ><span class="value">￥100.00 </span>
                </div>
                <div>
                  <span class="value-label">调账:</span
                  ><span class="value">￥0.00 </span>
                </div>
                <div>
                  <span class="value-label">总计:</span
                  ><span class="value">￥100.00 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="item" style="margin-top: 10px">
            <div class="item-bar-title">
              <span @click="changetransilate(0)">节点轨迹</span>
              <span @click="changetransilate(112)">操作轨迹</span>
              <span @click="changetransilate(224)">金额轨迹</span>
              <div
                class="divider-span"
                :style="{ transform: `translateX(${translateX}px)` }"
              ></div>
            </div>
            <div class="item-value-box">
              <div class="item-value">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                  >
                    {{ activity.content }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部三按钮 -->
        <div class="bottomBox">
          <el-button type="primary">修改</el-button>
          <el-button type="primary">退单</el-button>
          <el-button type="primary">催单</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myTableVue from "../table/my-table.vue";

export default {
  components: { myTableVue },
  data() {
    return {
      dialogTableVisible: false,
      translateX: 0,
      activities: [
        {
          content: "已退单",
        },
        {
          content: "已付款",
        },
        {
          content: "已完工",
        },
        {
          content: "已签到",
        },
      ],
      columntag: [
        {
          label: "父类目",
          prop: "order",
        },
        {
          label: "类目",
          prop: "salesorder",
        },
        {
          label: "商品",
          prop: "category",
        },
        {
          label: "数量",
          prop: "custom",
        },
        {
          label: "工费",
          prop: "phone",
        },
        {
          label: "预约上门",
          prop: "address",
        },
        {
          label: "交付",
          prop: "generate",
        },
        {
          label: "技师",
          prop: "node",
        },
        {
          label: "电话",
          prop: "pay",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changetransilate(data) {
      this.translateX = data;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' >
h3 {
  margin: 0;
  padding: 0;
}
.orderDetailsBox {
  height: 77vh;
  background-color: #fff;

  position: relative;
}
.my-dialog {
  top: 80px;
  right: -100px;
}
.item-title {
  position: relative;
}
.item-title h3 {
  font-size: 18px;
  font-weight: 550;
  padding-left: 15px;
}
.item-title::before {
  content: "";
  width: 3px;
  height: 21px;
  position: absolute;
  top: -1px;
  left: 2px;
  background-color: #425ac9;
}
.divider {
  width: 100%;
  height: 2px;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: aliceblue;
}
.item-value-box {
  margin-top: 15px;
  border-top: 2px solid #f8f4f4;
}
.item-value {
  padding: 20px;
  font-size: 16px;
}
.item-value > div {
  display: inline-block;
  margin-right: 200px;
  margin-top: 10px;
}
.value-label {
  margin-right: 15px;
}
.value {
  font-weight: 550;
}
.bottomBox {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 0;
}
.item-bar-title {
  position: relative;
}
.item-bar-title span {
  font-weight: 550;
  font-size: 18px;
  padding: 0 20px;
  cursor: pointer;
}
.divider-span {
  width: 112px;
  height: 3px;
  background-color: #425ac9;
  position: absolute;
  bottom: -15px;
  transition: all 0.3s;
}
</style>